<template>
  <div class="index user">
    <div class="dashboardAuth">
      <div>
        <div class="item-h layui-nav" lay-filter>
          <a href="javascript:void(0)" :class="{'layui-this':searchData.status === '0'}" class="layui-nav-item ftz16 " @click="changeClassfy('0')">已通过（{{me.viewpointNum}}）</a>
          <a href="javascript:void(0)" :class="{'layui-this':searchData.status === '1'}" class="layui-nav-item ftz16" @click="changeClassfy('1')">未通过（{{me.failPointNum}}）</a>
          <a href="javascript:void(0)" :class="{'layui-this':searchData.status === '3'}" class="layui-nav-item ftz16" @click="changeClassfy('3')">草稿箱（{{me.dustbinPointNum}}）</a>
          <a href="javascript:void(0)" :class="{'layui-this':searchData.status === '2'}" class="layui-nav-item ftz16" @click="changeClassfy('2')">待审核（{{me.auditPointNum}}）</a>
          <button v-if="me.authType" @click="$router.push('/viewpointWrite')" class="fr ftz16">+写观点</button>
        </div>
        <div v-if="articleList.length" class="list" id="list_1" list>
          <span class="tips" v-if="searchData.status !== '3'">提示：工作日审稿会在24小时内完成，请耐心等候。如果稿件被删，证明是广告贴。</span>
          <span class="tips" v-if="searchData.status === '3'">提示：草稿箱里的文章可以进行再次编辑，一键发布和删除。</span>
          <ul>
            <li v-for="(item, index) in articleList" :key="index">
              <a href="javascript: void(0)" v-if="searchData.status === '0'&&item.imgUrl" class="images"><img @click="$router.push('/articleDetails/'+item.viewPointId)" :src="item.imgUrl" :title="item.title"></a>
              <a href="javascript: void(0)" v-if="searchData.status !== '0'&&item.imgUrl" class="images"><img :src="item.imgUrl" :title="item.title"></a>
              <div class="info" :class="{'fr': item.imgUrl}">
                <a v-if="searchData.status === '0'" href="javascript:void(0)" @click="$router.push('/articleDetails/'+item.viewPointId)" class="title ftz18">{{item.title}}</a>
                <a v-if="searchData.status !== '0'" href="javascript:void(0)" class="title ftz18">{{item.title}}</a>
                <a v-if="searchData.status !== '1'" href="javascript: void(0)" class="txt">{{item.summary}} </a>
                <a v-if="searchData.status === '1'" href="javascript: void(0)" class="txt">{{item.cause}} </a>
                <div>
                  <span class="layui-btn layui-btn-primary layui-btn-xs" @click="$router.push('/viewpointWrite/'+item.viewPointId)" v-if="searchData.status === '3'||searchData.status === '1'">编辑</span>
                  <span class="layui-btn layui-btn-primary layui-btn-xs" @click="removeEvent(item.viewPointId)" v-if="searchData.status === '3'||searchData.status === '1'">删除</span>
                </div>
                <div>
                  <span class="layui-btn layui-btn-primary layui-btn-xs" @click="recall(item.viewPointId)" v-if="searchData.status === '2'">撤回</span>
                  <span class="layui-btn layui-btn-primary layui-btn-xs" @click="$router.push('/viewpointWrite/'+item.viewPointId)" v-if="searchData.status === '2'">详情</span>
                </div>
                <div class="txt-tip">
                  <span>{{ item.updateTime | parseTime('{y}-{m}-{d}')}}</span>
                  <span class='line'></span>
                  <span>阅读量：{{item.hot}}</span>
                  <span class='line'></span>
                  <span>分类：{{item.classifyName}}</span>
                </div>
              </div>
            </li>
          </ul>
          <!-- page -->
          <!-- <div id="page"></div> -->
          <div v-if="status">
            <laypage :pageSize.sync="searchData.pageSize" :total.sync="total" :pageNum.sync="searchData.pageNum" @changePage="getArticleByStatus"></laypage>
          </div>

          <!-- page end -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import $ from 'jquery'
import NavBar from '@/components/nav-bar'
import SideBar2 from '@/components/side-bar2'
import Footer from '@/components/footer'
import Laypage from '@/components/laypage'
import { mapState } from 'vuex'
// import CryptoJS from 'crypto-js'
import * as api from '@/service/api'
// import cookie from '@/utils/cookie'
export default {
  components: {
    NavBar,
    Footer,
    SideBar2,
    Laypage
  },
  data () {
    return {
      viewData: {},
      total: null,
      tagView: 'recommend',
      siteId: '123530',
      tag: 1,
      status: 1,
      searchData: {
        pageSize: 10,
        pageNum: 1,
        status: '0'
      },
      articleList: [],
      loading: false
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      me: state => state.me
    })
  },
  mounted () {
    this.status = null
    this.articleList = []
    setTimeout(() => {
      this.getArticleByStatus().then(() => {
        this.status = 1
      })
    }, 1000)
  },
  methods: {
    changeClassfy (key) {
      this.total = null
      this.searchData.pageNum = 1
      this.searchData.status = key
      this.status = null
      this.getArticleByStatus().then(() => {
        this.status = 1
      })
    },
    // loadMore () {
    //   this.searchData.pageNum = this.searchData.pageNum + 1
    //   this.getArticleByStatus()
    // },
    removeEvent (id) {
      let that = this
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认删除吗</div>',
        btn: '确认',
        // closeBtn: 1,
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          that.removeViewPoint(id)
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    async removeViewPoint (id) {
      this.loading = true
      await api.removeViewPoint({
        viewPointIds: id
      })
      this.searchData.pageNum = 1
      this.getArticleByStatus()
      this.$store.dispatch('getUserInfo')
      this.loading = false
    },
    async getArticleByStatus (page) {
      if (page) {
        this.searchData.pageNum = page
      }
      this.total = null
      this.loading = true
      let res = await api.getArticleByStatus({ ...this.searchData })
      this.articleList = res.data.data.list
      this.total = res.data.data.total
      this.loading = false
    },
    async recall (id) {
      await api.getViewPointRecall({ viewPointId: id })
      window.layui.use(['layer'], () => {
        let layer = window.layui.layer
        layer.msg('操作成功')
      })
      this.searchData.pageNum = 1
      this.getArticleByStatus()
      this.$store.dispatch('getUserInfo')
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/res/user";
</style>
